<template>
  <div class="content">
    <div class="left">
      <div class="text">
        <p class="title">
          {{ title }}
        </p>
        <el-divider style="margin: 0" />
        <div style="height: calc(100vh - 61px - 30px)">
          <el-scrollbar height="100%">
            <div class="list" v-if="currentItem">
              <div class="item" v-for="(item, index) in currentItem.context" :key="index">
                <span>{{ index + 1 }}.</span>
                {{ item.text }}
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <el-divider direction="vertical" style="height: 100%; margin: 0" />
    <div class="right">
      <div class="question_list">
        <el-scrollbar ref="scrollbarRef">
          <div class="inner">
            <p class="questionItem" v-for="(question, index) in currentItem?.qaList" :key="index">
              <span>{{ index + 1 }}.</span>
            <p class="question">问题：{{ question.question }}</p>
            <p class="answer">回答：{{ question.answer }}</p>
            <p class="question_type">问题类型：<el-tag>{{ question.question_type }}</el-tag></p>
            <el-popconfirm title="确定删除?" @confirm="() => onDelete(index)">
              <template #reference>
                <span class="delete">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </template>
            </el-popconfirm>
            <span class="edit" @click="onEdit(index)">
              <el-icon>
                <Edit />
              </el-icon>
            </span>
            </p>
          </div>
        </el-scrollbar>
      </div>
      <el-divider style="margin: 0" />
      <div class="form">
        <el-form :model="form" label-suffix="：" @submit.prevent>
          <el-form-item label="问题">
            <el-input v-model="form.question" type="textarea" placeholder="请输入问题" :rows="2"
              @keyup.enter.ctrl.prevent="onSubmit" />
          </el-form-item>
          <el-form-item label="回答">
            <el-input v-model="form.answer" type="textarea" placeholder="请输入回答" :rows="2"
              @keyup.enter.ctrl.prevent="onSubmit" />
          </el-form-item>
          <el-form-item label="问题类型">
            <el-select v-model="form.question_type" placeholder="请选择问题类型" size="large">
              <el-option v-for="item in questionTypes" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="tools">
              <div>
                <el-button type="primary" @click="onSubmit"> 提交 </el-button>
              </div>
              <div>
                <el-tooltip
                  effect="dark"
                  content="快捷键：a"
                  placement="top"
                >
                  <el-button @click="onPrevious"> 上一页</el-button>
                </el-tooltip>
                <el-tooltip
                  effect="dark"
                  content="快捷键：d"
                  placement="top"
                >
                  <el-button @click="onNext"> 下一页 </el-button>
                </el-tooltip>
                <el-button @click="onJump"> 跳转到 </el-button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import piniaStore from "@/store";
import { QuestionType, questionTypes } from "@/types/question";
import { Edit } from "@element-plus/icons-vue";
import { IElScrollBar } from "@/types/element-plus";

const currentItem = computed(() => {
  return piniaStore.questionStore.currentItem;
});

const title = computed(() => {
  return `页码：${piniaStore.questionStore.currentIndex + 1}/${piniaStore.questionStore.totalCount
    }`;
});

const form = ref<{
  question: string;
  answer: string;
  question_type: QuestionType;
}>({
  question: "",
  answer: "",
  question_type: "基础问答",
});
const onSubmit = () => {
  if (!form.value.question) return ElMessage.warning("请输入提问内容！");
  if (editId.value) {
    const index = Number(editId.value.split("$")[1]) as number;
    piniaStore.questionStore.editQuestion({
      index: index,
      question: form.value.question,
      answer: form.value.answer,
      question_type: form.value.question_type,
    });
    editId.value = ''
  }else {
    piniaStore.questionStore.addQuestion({
      question: form.value.question,
      answer: form.value.answer,
      question_type: form.value.question_type,
    });
  }
  form.value = {
    'question': '',
    'answer': '',
    'question_type': '基础问答'
  }
};


const scrollbarRef = ref<IElScrollBar>();
const onPrevious = () => {
  piniaStore.questionStore.previous();
  scrollbarRef.value?.setScrollTop(0);
};

const onNext = () => {
  piniaStore.questionStore.next();
  scrollbarRef.value?.setScrollTop(0);
};

const keydown = (e: KeyboardEvent) => {
    if (e.code === 'KeyA') {
      onPrevious()
    }else if(e.code === 'KeyD'){
      onNext()
    }
};

onMounted(() => {
  document.addEventListener('keydown', keydown)
})

onBeforeUnmount(() => {
  document.removeEventListener('keydown', keydown)
})

const onJump = async () => {
  const { value } = await ElMessageBox.prompt("请输入序号", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPattern: /^\+?[1-9]\d*$/,
    inputErrorMessage: "请输入数字",
  });
  piniaStore.questionStore.setNumber(Number(value));
  scrollbarRef.value?.setScrollTop(0);
};

const onDelete = (index: number) => {
  piniaStore.questionStore.deleteQuestion({
    index: index,
  });
  return true;
};

const editId = ref('');
const onEdit = (index: number) => {
  if (!currentItem.value) return
  editId.value = `${currentItem.value.context_id}$${index}`
  const item = currentItem.value?.qaList[index];
  if (!item) return
  // form.value = {
  //   question: item.question,
  //   answer: item.answer,
  //   question_type: item.question_type,
  // }
  form.value.question = item.question
  form.value.answer = item.answer
  form.value.question_type = item.question_type
};
</script>

<style scoped lang="scss">
.content {
  width: 1300px;
  height: calc(100vh - 61px);
  margin: 0 auto;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
  display: flex;

  .left {
    width: 50%;
    height: calc(100vh - 61px);

    .text {
      height: calc(100vh - 61px);
      font-size: 16px;
      line-height: 1.5;
      text-indent: 2em;

      .title {
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #67c23a;
      }

      .text_inner {
        padding: 20px;
      }
    }

    .list {
      padding: 0 20px;

      .item {
        margin-bottom: 10px;
        font-size: 16px;
      }
    }
  }

  .right {
    width: 50%;
    height: 100%;

    .question_list {
      height: calc(100% - 291px - 12px);

      .inner {
        padding: 16px;

        .questionItem {
          width: 100%;
          line-height: 1.5;
          padding: 6px 0;
          word-break: break-all;
          cursor: pointer;
          padding: 4px;
          position: relative;

          &:hover {
            opacity: 0.8;
            background-color: rgba($color: #000000, $alpha: 0.1);
          }

          span {
            margin-right: 10px;
          }

          .delete {
            color: #e6a23c;
            position: absolute;
            right: 0;
            top: 0;
          }

          .edit {
            color: #409EFF;
            position: absolute;
            right: 20px;
            top: 0;
          }

          .question {
            margin-bottom: 10px;
          }

          .answer {
            margin-bottom: 10px;
          }

          .question_type {
            margin-bottom: 10px;
          }
        }
      }
    }

    .form {
      height: 290px;
      padding: 20px;

      .tools {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
